<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
	<link rel="stylesheet" href="../../Common/css/ufun.css" />
	<link rel="stylesheet" href="../../Common/css/lib/materialize.min.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<!-- <script src="../../Common/js/mui.min.js"></script> -->
	<script src="../../Common/js/tools.js"></script>
	<script src="../../Common/js/jump.js"></script>
	<script src="../../Common/js/lib/jquery-3.4.1.min.js"></script>
	<script src="../../Common/js/lib/materialize.min.js"></script>
	<style>
		html {
			background: var(--color-white) !important;
		}
		
		:root {
			--header-height: 50;
		}
		
		body {
			overflow-x: hidden;
			overflow-y: scroll;
		}

		header {
			background-image: var(--personal-center-header-img);
			background-size: cover;
			box-shadow: 0 -5px 30px 0 var(--color-gray-medium) !important;
		}

		header * {
			color: var(--color-black);
		}

		#HeaderContent {
			position: relative;
			display: block;
			height: max-content;
			margin-top: 8vw;
			width: 100vw;
		}

		#OpenSet,
		#HeadImg,
		#UserIndex,
		#TopInfo,
		.board {
			position: absolute;
		}

		#HeadImg {
			top: 10vw;
			left: 5vw;
			width: 20vw;
			height: 20vw;
			border-radius: 100vw;
			border: 2px solid white;
		}

		#TopInfo {
			top: 14vw;
			left: 30vw;
			font-size: 5vw;
		}

		#OpenSet {
			top: 11vw;
			right: 7vw;
			width: 6vw;
		}

		#UserIndex {
			top: 23vw;
			right: 6vw;
			font-size: 4vw;
		}

		#UserName {
			font-weight: bold;
		}

		.board {
			display: block;
			opacity: 0;
			margin-left: 5vw;
			transition: opacity 500ms;
			position: relative;
			background: var(--color-white);
			color: var(--color-black);
			overflow: hidden;
			border-radius: 3vw;
			width: 90vw;
			height: 32vw;
			margin-top: 4vw;
			box-shadow: 0 0 10px 0px var(--color-gray-light);
			z-index: 102;
		}

		.board.show {
			opacity: 1 !important;
		}

		.board .line {
			border-right: 1px solid var(--color-gray-light);
		}

		.board .title {
			display: block;
			position: absolute;
			width: 82vw;
			height: 8vw;
			top: 2vw;
			left: 4vw;
			font-size: 4vw;
			padding-bottom: 10px;
			border-bottom: 1px solid var(--color-gray-light);
		}

		.board .block {
			font-size: 4vw;
			text-align: center;
			float: left;
			margin-top: 14vw;
		}

		#Board1 {
			margin-top: -9vw;
			height: 20vw;
		}

		#Board1 .block {
			width: calc(25% - 1px);
			margin-top: 4vw;
		}

		#Board2 .block {
			width: calc(33% - 1px);
		}

		#Board3 {
			margin-bottom: 5vw;
		}

		#Board3 .block {
			width: calc(50% - 1px);
		}

		#Board3 .block img {
			height: 10vw;
			margin-left: 6vw;
			float: left;
			width: 8vw;
			filter: drop-shadow(0 0 0.5px var(--color-gray-medium));
		}

		#Board3 .block .board3-text {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: -2vw 1vw 0vw;
			padding: 0 3vw;
			overflow: auto;
			word-break: break-all;
			width: calc(100% - 8vw - 6vw - 1vw);
			height: 18vw;
		}

		#Star {
			color: var(--color-black) !important;
			margin-right: 2vw;
		}
	</style>
</head>

<body>
	<div id="Pull" style="display: none;"></div>
	<header>
		<div id="HeaderContent">

			<img id="HeadImg" onclick="JumpToImgView(SERVER_LOC + UserInfo['uHeadImgLoc']);" />
			<div id="TopInfo" onclick="JumpToUserIndex(PhoneNo);">
				<p id="UserName">&nbsp;</p>
				<p id="Star">&nbsp;</p>
			</div>

			<span id="OpenSet" class="material-icons" onclick="JumpToSettings();">settings</span>
			<div id="UserIndex" onclick="JumpToUserIndex(PhoneNo);">个人主页&gt;</div>
		</div>
	</header>
	<div class="content">
		<!-- 解答+提问+关注+收藏 -->
		<div class="board" id="Board1">
			<div class="block line" onclick="JumpToPersonalAnswer();">
				<p class="board1-number">&nbsp;</p>
				<p>解答</p>
			</div>
			<div class="block line" onclick="JumpToPersonalQuestion();">
				<p class="board1-number">&nbsp;</p>
				<p>提问</p>
			</div>
			<div class="block line" onclick="JumpToPersonalFollow();">
				<p class="board1-number">&nbsp;</p>
				<p>关注</p>
			</div>
			<div class="block" onclick="JumpToPersonalFans();">
				<p class="board1-number">&nbsp;</p>
				<p>粉丝</p>
			</div>
		</div>

		<!-- 我的钱包 -->
		<div class="board" id="Board2" onlick="JumpToWallet();">
			<div class="title">
				<p style="float: left; font-weight: bold;">我的钱包</p>
				<p style="float: right; color: var(--color-gray-light);">查看钱包详情</p>
			</div>
			<div class="block line">
				<p class="board2-number">&nbsp;</p>
				<p>今日收益</p>
			</div>
			<div class="block line">
				<p class="board2-number">&nbsp;</p>
				<p>我的Ｕ币</p>
			</div>
			<div class="block">
				<p class="board2-number">&nbsp;</p>
				<p>我的积分</p>
			</div>
		</div>

		<!--我的校园-->
		<div class="board" id="Board3" onclick="JumpToSetEdu();">
			<div class="title">
				<p style="float: left; font-weight: bold;">我的校园</p>
				<p style="float: right; color: var(--color-gray-light);">更新教育经历</p>
			</div>
			<div class="block line">
				<img src="img/location.png" />
				<div class="board3-text">&nbsp;</div>
			</div>
			<div class="block">
				<img src="img/book.png" />
				<div class="board3-text">&nbsp;</div>
			</div>
		</div>
	</div>
	<div class="Footer"></div>
</body>

<script>
	var current;
	var PhoneNo; //手机号
	var UserHash; //cookie值
	var UserInfo; //用户信息

	document.addEventListener('plusready', function () {
		GetStatusTop();
		plus.storage.removeItem('userInfo');
		current = plus.webview.currentWebview();
		drawPage();
		RefreshUserInfo(function (phoneNo) {
			PhoneNo = phoneNo;
			drawPage();
		});
		DoShow(current, 'none', 0);
	});

	function refreshPage() {
		RefreshUserInfo(function (phoneNo) {
			PhoneNo = phoneNo;
			drawPage();
		});
	};

	function drawPage(callback = function () { }) {
		UserInfo = plus.storage.getItem("userInfo");
		if (!UserInfo)
			return;
		UserInfo = JSON.parse(UserInfo);

		ID("UserName").innerHTML = UserInfo["uNick"]; //用户名
		ID("HeadImg").src = SERVER_LOC + UserInfo["uHeadImgLoc"]; //头像
		ID("Star").innerHTML = '★' + ((
			UserInfo["uStarCrt"] +
			UserInfo["uStarFln"] + UserInfo["uStarClr"]) / 3).toFixed(1); //星级

		var board1Numbers = CLASS("board1-number");
		board1Numbers[0].innerHTML = UserInfo["uAnsCnt"]; //解答、提问、关注、粉丝
		board1Numbers[1].innerHTML = UserInfo["uQuesCnt"];
		board1Numbers[2].innerHTML = UserInfo["uFollowCnt"];
		board1Numbers[3].innerHTML = UserInfo["uFansCnt"];

		var board2Numbers = CLASS("board2-number");
		board2Numbers[0].innerHTML = UserInfo["uGainToday"].toFixed(2); //今日收益、我的U币、我的积分
		board2Numbers[1].innerHTML = UserInfo["uUB"].toFixed(2);
		board2Numbers[2].innerHTML = UserInfo["uScore"].toFixed(0);

		var board3Text = CLASS("board3-text");
		board3Text[0].innerHTML = UserInfo["uEduSchoolName"];
		board3Text[1].innerHTML = UserInfo["uEduDeptName"];
		callback();
		
		let i = 1;
		(function () {
			ID('Board' + i++).classList.add('show');
			if (i < 4)
				setTimeout(arguments.callee, 200);
		})();
	}
</script>

</html>